<template>
	<view>
		<uni-nav-bar
		statusBar="true" 
		:fixed="true" 
		backgroundColor="#eff3f7"
		leftIcon="back"
		:title="i18n.addAddress"
		@click-left="clickLeft"
		:rightText="i18n.save"
		@click-right="comfirm"
		:border="false">
		</uni-nav-bar>
		<view class="content">
			<view class="title">
				{{i18n.remarks}}
			</view>
			<view class="buy-way-input">
				<input type="text"  :placeholder="i18n.p_remarks"  v-model="code"/>
			</view>
			<view class="title">
				{{i18n.address}}
			</view>
			<view class="buy-way-input">
				<input type="text" :placeholder="i18n.PleaseEnterAValidAddress" v-model="address"/>
				<view class="eye" @tap.stop="scan">
					<uni-icon 
					type="scan" 
					color="#007AFF" 
					size="16"></uni-icon>
				</view>
			</view>
		</view>
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	import Load from '@/components/common/load.vue';
	import uniNavBar from "../../components/uni-nav-bar/uni-nav-bar.vue"
	import uniIcon from "../../components/uni-icon/uni-icon.vue"
	import {fetch, showToast} from '@/common/js/util.js'
	import {mapGetters} from 'vuex' 
	export default {
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getLangType'
			])
		},
		components:{
			uniNavBar,
			uniIcon,
			Load
		},
		data() {
			return {
				showLoad:false,
				tokenId:'',
				code:'',
				address:'',
				isClick:false
			}
		},
		onLoad(e) {
			this.tokenId = JSON.parse(e.item).id;
		},
		methods:{
			clickLeft(){
				uni.navigateBack({
					delta:1
				})
			},
			comfirm(){
				if(this.isClick){
					return
				}
				if(!this.address){
					showToast(this.i18n.PleaseEnterAValidAddress)
					return
				}
				let url  = this.getRequestUrl + '/api/wallet/addA';
				let data = {
					id        : this.getLoginInfo.id,
					token     : this.getLoginInfo.token,
					lang_type : this.getLangType=='chs'?2:1,
					token_id  : this.tokenId,
					tag       : this.code,
					address   : this.address
				}
				this.showLoad = true;
				fetch(url,data,'POST').then(res=>{
					this.showLoad = false;
					showToast(res.data.msg)
					if(res.data.code==1){
						uni.navigateBack({
							delta:2
						})
					}else if(res.data.code ==2){
						showToast(res.data.msg)
						uni.navigateTo({
							url:"/pages/new-login/new-login"
						})
					}
				}).catch(err=>{
					this.showLoad = false;
				})
			},
			scan(){
				let that = this;
				// 允许从相机和相册扫码
				uni.scanCode({
					// onlyFromCamera: true, //只允许通过相机扫码
					success: function (res) {
						if(res.result.code){
							that.code = res.result.code;
							that.address = res.result.address;
						}else{
							that.code = '';
							that.address = res.result;
						}
						
					}
				});
			}
		}
	}
</script>
<style>
	page{
		background-color: #eff3f7;
	}
</style>
<style lang="scss" scoped>
	.content{
		margin:30upx;
		background-color: #FFFFFF;
		border-radius:10upx;
		padding:0 15upx 30upx;
		.title{
			line-height: 94upx;
			font-size:24upx;
			color: #2B2E33;
			border-top: 2upx solid #eff3f7;
			padding-left: 20upx;
			&:first-child{
				border-top:none;
			}
			&:last-child{
				border-top:none;
			}
		}
		.buy-way-input{
			margin-bottom: 56upx;
			position: relative;
			&:last-child{
				border-bottom: 0;
			}
			.eye{
				position: absolute;
				right: 20upx;
				top: 0;
				line-height: 80upx;
				height: 80upx;
				z-index: 999;
				.send-msg{
					font-size:24upx;
					color: #007AFF;
					&.gray{
						color: #999999;
					}
				}
			}
			input{
				background-color: #eff3f7;
				line-height: 80upx;
				height: 80upx;
				border-radius:10upx;
				padding-left: 30upx;
			}
		}
		button{
			width: 280upx;
			height: 80upx;
			line-height: 80upx;
			border-radius:40upx;
			margin: 0 auto;
			font-size:26upx;
			background: linear-gradient(to right, #0C48E0, #2AA2FF);
			&.active{
				transform: scale(.9);
				opacity: .9;
			}
		}
	}
</style>
